<template>
<div>
  <MyTable :arr="data">
    <template v-slot:tags="scope">
      <span class="tags" v-for="(item,i) in scope.row.tags" :key="i">{{item}}</span>
      <input
        class="tag-input form-control"
        style="width: 100px;"
        type="text"
        v-if="scope.row.inputVisible"
        v-model.trim="scope.row.inputValue"
        @keyup.enter="addTag(scope.row,scope.row.inputValue)"
        @blur="addTag(scope.row,scope.row.inputValue)"
        v-focus
      />
      <button
        v-else
        style="display: block;"
        class="btn btn-primary btn-sm add-tag"
        @click="scope.row.inputVisible = true"
      >+Tag</button>

    </template>
    <template v-slot:config="scope">
      <button type="button"
              class="btn btn-danger btn-sm"
              @click="del(scope)"
      >删除</button>
    </template>
  </MyTable>
</div>
</template>

<script>
import MyTable from '@/components/MyTable'
import axios from 'axios'
export default {
  name: 'MyGoodsList',
  components: {
    MyTable
  },
  data () {
    return {
      data: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await axios({
        url: ' https://www.escook.cn/api/goods'
      })
      this.data = res.data.data
    },
    addTag (row, text) {
      if (text === '') return
      row.tags.push(text)
      row.inputValue = ''
      row.inputVisible = false
    },
    del (row) {
      const index = this.data.findIndex(item => {
        console.log(item)
        return item.id === row.row.id
      })
      this.data.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.tags {
  font-size: 14px;
  color: #fff;
  background-color: #40ac73;
  border-radius: 5px;
  padding: 5px 8px;
  margin: 0 4px;
}
</style>
